<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>index</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    #box1 {
      width: 100px;
      height: 100px;
      background: rgba(255, 0, 0, 1);
      position: absolute;
    }

    .box {
      width: 100px;
      height: 100px;
      background: rgba(255, 0, 0, 0.5);
      position: absolute;
    }
  </style>
</head>

<body>
参考: https://blog.csdn.net/weixin_43991241/article/details/127335631
<div id="box1"></div>
<script>
  /*
      鼠标拖拽分为3个阶段：
      1、当鼠标在元素上方按下时，拖拽开始（onmousedown）
      2、当鼠标移动时元素跟随鼠标移动，拖拽进行中（onmousemove）
      3、当鼠标松开时，拖拽停止，元素固定在最后所在位置（onmouseup）
  */
  // 获取元素
  var oBox = document.getElementById("box1");
  // 1、鼠标按下
  oBox.onmousedown = function (event) {
    console.log('onmousedown')
    var parent = document.getElementsByTagName('body')
    var drag = document.createElement('div')
    parent[0].appendChild(drag)
    // 事件对象
    event = event || window.event;
    // 计算鼠标与盒子左侧和上方的距离
    // 左侧距离 = 鼠标水平坐标-盒子左侧偏移距离（offsetLeft）
    // 上方距离 = 鼠标垂直坐标-盒子上方偏移距离（offsetTop）
    var lf = event.clientX - oBox.offsetLeft;
    var tp = event.clientY - oBox.offsetTop;
    // 2、鼠标移动，盒子随着鼠标移动而移动
    document.onmousemove = function (event) {
      event = event || window.event;
      // 获取鼠标水平&垂直方向的坐标
      var mouseLeft = event.clientX;
      var mouseTop = event.clientY;
      drag.setAttribute('class', 'box')
      // 设置盒子的left&top值，注意：要为元素加上定位
      drag.style.left = mouseLeft - lf + "px";
      drag.style.top = mouseTop - tp + "px";
      /*
          当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能异常，这是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false 来取消默认行为
          但是这个对IE8一下不起作用
      */
      return false;
    }
  }

  //3、松开鼠标，盒子停止
  document.onmouseup = function () {
    console.log('onmouseup')
    //取消鼠标移动事件
    document.onmousemove = null;
    var list = document.getElementsByClassName('box')
    // HTMLCollection 看起来像数组但不是数组，不能使用数组的方法
    // list.forEach(element => {
    //     element.style.background = 'rgba(255, 0, 0, 1)'
    // });
    for (i = 0; i < list.length; i++) {
      list[i].style.background = 'rgba(255, 0, 0, 1)'
      console.log(list[i])
      // 这个item变量一定要定义的，后面的事件才能找得到本体
      let ietm = list[i]
      ietm.onmousedown = function (event) {
        console.log('onmousedown')
        // 事件对象
        event = event || window.event;
        // 计算鼠标与盒子左侧和上方的距离
        // 左侧距离 = 鼠标水平坐标-盒子左侧偏移距离（offsetLeft）
        // 上方距离 = 鼠标垂直坐标-盒子上方偏移距离（offsetTop）
        var lf = event.clientX - ietm.offsetLeft;
        var tp = event.clientY - ietm.offsetTop;
        //2、鼠标移动，盒子随着鼠标移动而移动
        document.onmousemove = function (event) {
          event = event || window.event;
          // 获取鼠标水平&垂直方向的坐标
          var mouseLeft = event.clientX;
          var mouseTop = event.clientY;
          console.log(ietm)
          // 设置盒子的left&top值，注意：要为元素加上定位
          ietm.style.left = mouseLeft - lf + "px";
          ietm.style.top = mouseTop - tp + "px";
          /*
              当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能异常，这是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false 来取消默认行为
              但是这个对IE8一下不起作用
          */
          return false;
        }
      }
    }
  }
</script>
</body>

</html>
